<!--
Example of TreeGrid using asynchronous (AJAX) communication with server
Example of creating grid with dynamic layout from single database table
Uses support file GridLayout.jsp grid layout
Uses support file GridData.jsp as data generating script
Uses support file GridUpload.jsp as script for saving changes to database
Uses HSQLDB database ../Database.*, table TableData, as data
! Check if JSP application has write access to ../Database.* files
! Don't forget to copy hsqldb.jar file to JAVA shared lib directory
-->
<html>
   <head>
      <script src="../../../Grid/GridE.js"> </script>
      <style>
         /* Examples shared styles */
         .ExampleHeader,.ExampleName,.ExampleShort,.ExampleDesc,.ExampleErr { max-height:999999px; }
         .ExampleHeader { font:normal 12px Arial; color:blue; }
         .ExampleHeader b { color:#800; }
         .ExampleHeader i { font-style:normal; font-weight:bold; color:black; }
         .ExampleHeader u { font-weight:bold; text-decoration:none; padding:0px 2px 0px 2px; color:#0B0; }
         .ExampleName { font:bold 30px Arial; padding:5px 0px 5px 0px; }
         .ExampleShort { font:italic 15px Arial; margin-bottom:10px; padding-top:5px; }
         .ExampleDesc { font:14px/17px Arial; margin:0px 5px 10px 5px; padding:5px; border:1px solid #AAA; }
         .ExampleErr { font:14px/30px Arial; margin:50px auto 10px auto; padding:5px; border:1px solid black; color:red; width:800px; text-align:center; display:none; }
         .ExampleBorder { margin:0px 5px 0px 5px; clear:both; zoom:1; }
         .ExampleDesc ul { padding:0px 0px 0px 15px; margin:10px 0px 0px 0px; }
         .ExampleDesc li { padding-bottom:8px; line-height:18px; }
         .ExampleDesc h4 { font:bold 15px/20px Arial; margin:0px; padding:0px 6px 0px 6px; background:#87DAE5; border:1px solid #888; color:black; display:inline; }
         .ExampleDesc u { font-size:11px; text-decoration:none; }
         .ExampleDesc .Link { text-decoration:underline; color:blue; cursor:pointer; }
         .ExampleMain { height:300px; }
         @media (max-height:800px) { 
            .ExampleDesc { font-size:13px; line-height:15px; margin:0px 5px 5px 5px; padding:3px 5px; } 
            .ExampleDesc br { display:none; }
            .ExampleName { font:20px Arial; padding:0px; }
            .ExampleShort { font-size:13px; }
            }
      </style>
   </head>
   <body>
      <center class="ExampleHeader"><script>document.write(location.href.replace(/(.*)(\/Examples\/|\/ExamplesGantt\/)([^\/]+)\/([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/<i>$4</i>/$5").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
      <center class="ExampleName">Grid from database table</center>
      <center class="ExampleShort">Generates grouped grid from plain table by dynamic layout script</center>
      <div class="ExampleErr">
         <script> if(location.protocol=="file:") document.write("<style>.ExampleDesc, .ExampleBorder {display:none;} .ExampleErr { display:block; } </style>"); </script>
         Do <b>not</b> run this file locally!<br />Run it from your local or remote web http server where is installed JAVA JRE.<br>
      </div>
      <div class="ExampleDesc">
         Generates treetable from standard database table. Also flips the table and shows data in changed layout.
         For every action there is used another support code (Layout, Data, Upload). The layout is also generated.<br />
         Rows are identified by one unique editable column, with using full ids (including parents ids).
         For demonstration it shows id column, to see what ids are generated by TreeGrid.<br />
      </div>
      <div class="ExampleDesc">
         <i>Source files:</i> <h4>Grid.html</h4> (this html page), 
         <a href="GridLayout.jsp" target="_blank"><h4>GridLayout.jsp</h4></a> (server script generates XML layout), 
         <a href="GridData.jsp" target="_blank"><h4>GridData.jsp</h4></a> (server script generates XML data), 
         <a href="GridUpload.jsp" target="_blank"><h4>GridUpload.jsp</h4></a> (server script saves XML changes), 
         <h4>../Database.*</h4> (source SQL database, table <b>TableData</b>)
      </div>
      <div class="ExampleDesc">
         <h4 style="background:#FCC;">You have to copy file <b style="color:red;">hsqldb.jar</b> to your JRE shared lib directory and <b style="color:red;">restart</b> your http server</h4><br />
         <h4 style="background:#FCC;">The JSP service program must have <b style="color:red;">write</b> access to all files <b style="color:red;">database.*</b></h4><br />
         The <h4>hsqldb.jar</h4> is JDBC driver for <a href='http://www.hsqldb.org'><h4>HSQLDB database</h4></a> and is located in TreeGrid distribution in <b>/Server/Jsp/</b> directory.
         <u>The shared lib directory is usually <b><i>jre_install_path</i>/lib/ext</b> and also e.g. in Tomcat is usually <b><i>tomcat_install_path</i>/shared/lib</b>.</u><br>
         You can use any other SQL database instead of HSQLDB (e.g. <h4>Oracle</h4>, <h4>MS SQL server</h4>, <h4>MySQL</h4> ,...), just assign different connection to java.sql.Connection Conn in the *.jsp files. 
         You can run the ../<b>MySqlUTF8.sql</b> script to create the "TreeGridTest" sample database on your SQL server.
      </div>
      <div class="ExampleBorder">
         <div class="ExampleMain">
            <bdo Debug='check'
                 Layout_Url="GridLayout.jsp" 
                 Data_Url="GridData.jsp"
                 Upload_Url="GridUpload.jsp" Upload_Format="Internal" Upload_Data="TGData"
                 Export_Url="../Framework/Export.jsp"
                 ></bdo>
            </div>
      </div>

      <!-- Google Analytics code run once for trial -->
      <script>
         var TGTrial = document.cookie.match(/TGTrialJSP\s*=\s*(\d+)/), TGIndex = 2;
         if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
            var n = "RunTrialJSPGrid", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialJSP="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
            var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
            var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
                 +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
            var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
            },100);
      </script>
   </body>
</html>
